<template>
	<view style="background: #fff;padding: 0 40rpx;">

		<navigator url="/pages/search-organizations-or-doctors/search-organizations-or-doctors" hover-class="none"
			class="searchBox">
			<image
				src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2326.png"
				class="searchImg"></image>
			<text style="color: #ccc;	font-size: 14px;font-weight: 500;">搜索机构/医生</text>
		</navigator>

		<!-- <view class="sildBox"> -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000" 
			:circular="true" indicator-active-color="rgb(79, 172, 254)" class="bannerBox">
				<swiper-item v-for="(item ,index) in getBanner" :key="index">
					<image :src="item.imagePath" class="ImgBox" @click="returnOrganization()"></image>
				</swiper-item>
			</swiper>
		<!-- </view> -->
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getBannerApi
	} from '../../api/home';


// 点击轮播图跳转到机构页面
function returnOrganization(){
	uni.navigateTo({
		url:'/homepackge/pages/nearbyLnstitutions/nearbyLnstitutions'
	})
}

	const getBanner = ref([])

	onMounted(() => {

		accBanner()
	})

	// 轮播图
	async function accBanner() {
		const res = await getBannerApi()
		if (res.code == 200) {
			getBanner.value = res.data.rows

		}
	}
</script>

<style scoped lang="scss">
	.bannerBox {
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		height: 450rpx;
	}

	.ImgBox {
		height: 380rpx;
		width: 100%;
	}

	.searchBox {
		height: 84rpx;
		border: 1px solid #eee;
		border-radius: 8px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;

		// position: absolute;

		box-shadow: 0px 2px 2px #eee;

		text {
			color: #ccc;
			font-size: 18rpx;
			font-weight: 500;
		}
	}

	.searchImg {
		width: 32rpx;
		height: 34rpx;
		margin-right: 20rpx;
		margin-top: 5rpx;
	}

	// .bannerBox {
	// 	width: 100%;
	// 	height: 380rpx;
	// 	border-radius: 20px;
	// 	margin-bottom: 30rpx;

	// 	uni-image>img {
	// 		width: 100%;
	// 		height: 190rpx;
	// 		margin-bottom: 30rpx;
	// 		background-position: center;
	// 	}
	// }
</style>